<template>
  <div>
    <h2 class="h-8 flex items-start px-2 text-lg">相亲相爱一家人{{ id }}群</h2>
    <main class="border-t p-4">
      <div class="flex justify-center">
        <div class="inline-block py-1 px-2 rounded bg-gray-300 text-white text-xs">2023年05月01日 08:00</div>
      </div>

      <div class="mt-4 flex flex-row">
        <div class="app-no-drag w-10 h-10 bg-green-500 text-gray-300 border border-gray-100 rounded flex justify-center items-center">
          <i class="el-icon-picture"></i>
        </div>
        <div class="flex-1 flex justify-start items-center ml-2 text-xs lg:text-base">
          <div class="app-no-drag select-text inline-block py-2 px-4 bg-white border border-gray-100 rounded">已经集成了 Vue + ElementUI + Electron + TailwindCSS，具体步骤记录在 doc 中，可参见。</div>
        </div>
      </div>

      <div class="mt-4 flex flex-row-reverse">
        <div class="app-no-drag w-10 h-10 bg-indigo-500 text-gray-300 border border-gray-100 rounded flex justify-center items-center">
          <i class="el-icon-picture"></i>
        </div>
        <div class="flex-1 flex justify-end items-center mr-2 text-xs lg:text-base">
          <div class="app-no-drag select-text inline-block py-2 px-4 bg-white border border-gray-100 rounded">好的，有哪些使用 Electron 开发的应用可以参考呢？</div>
        </div>
      </div>

      <div class="mt-4 flex flex-row">
        <div class="app-no-drag w-10 h-10 bg-green-500 text-gray-300 border border-gray-100 rounded flex justify-center items-center">
          <i class="el-icon-picture"></i>
        </div>
        <div class="flex-1 flex justify-start items-center ml-2 text-xs lg:text-base">
          <div class="app-no-drag select-text inline-block py-2 px-4 bg-white border border-gray-100 rounded">
            Visual Studio Code <br>
            迅雷 <br>
            微信开发者工具 <br>
            ApiFox <br>
            Postman <br>
            Skype <br>
            GitHub Desktop <br>
            等等...
          </div>
        </div>
      </div>

      <div class="mt-4 flex flex-row-reverse">
        <div class="app-no-drag w-10 h-10 bg-indigo-500 text-gray-300 border border-gray-100 rounded flex justify-center items-center">
          <i class="el-icon-picture"></i>
        </div>
        <div class="flex-1 flex justify-end items-center mr-2 text-xs lg:text-base">
          <div class="app-no-drag select-text inline-block py-2 px-4 bg-white border border-gray-100 rounded">开发 Electron 的注意事项有哪些？</div>
        </div>
      </div>

      <div class="mt-4 flex flex-row-reverse">
        <div class="app-no-drag w-10 h-10 bg-indigo-500 text-gray-300 border border-gray-100 rounded flex justify-center items-center">
          <i class="el-icon-picture"></i>
        </div>
        <div class="flex-1 flex justify-end items-center mr-2 text-xs lg:text-base">
          <div class="app-no-drag select-text inline-block py-2 px-4 bg-white border border-gray-100 rounded">Electron 应用的优缺点有哪些？</div>
        </div>
      </div>

      <div class="mt-4 flex flex-row">
        <div class="app-no-drag w-10 h-10 bg-green-500 text-gray-300 border border-gray-100 rounded flex justify-center items-center">
          <i class="el-icon-picture"></i>
        </div>
        <div class="flex-1 flex justify-start items-center ml-2 text-xs lg:text-base">
          <div class="app-no-drag select-text inline-block py-2 px-4 bg-white border border-gray-100 rounded">
            【优点：】 <br>
            1、前端技术开发； <br>
            2、提供原生接口； <br>
            3、方便热更新； <br>
            4、开发调试方便； <br>
            5、跨平台； <br>
            6、基于node.js，不完全受限于扩展性强； <br>
            7、已有众多使用Electron开发的成熟系统。 <br>
            【缺点】： <br>
            1、基于 Chromium 和 Node.js，打包体积大； <br>
            2、可访问本地文件及系统API，需注意安全性问题； <br>
            3、前端人员需要了解进程、线程、渲染进程、主进程等概念； <br>
            4、设计人员需要注意用户操作行为及窗口交互的一致性。
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "home-chat-info",
  data() {
    return {
      id: "", // 好有标识。
    };
  },
  mounted() {
    const {id} = this.$route.params;
    this.id = id;
  }
};
</script>